<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span='12'>
        <p class='p_hr'>物流服务</p>
        <el-form-item label="运费模板">
          <el-select v-model="form.freight" placeholder="请选择类目">
            <el-option label="包邮" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" prop='providerId'>
          <el-select v-model="form.providerId" placeholder="请选择供应商">
            <el-option
              :label="opt.name"
              :value="opt.providerId"
              v-for='opt in providerList'
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库地址" prop='channelId'>
          <el-col :span='9'>
            <el-select v-model="form.channelId" placeholder="请选择仓库地址">
              <el-option
                :label="opt.name"
                :value="opt.channelId"
                v-for='opt in storeList'
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span='10' v-if='storeDetail'>
            <div>{{storeDetail}}</div>
          </el-col>
        </el-form-item>
        <el-form-item label="退货收件人" prop='returnContacts'>
          <el-input v-model="form.returnContacts"></el-input>
        </el-form-item>
        <el-form-item label="退货联系方式" prop='returnContactInfo'>
          <el-input v-model="form.returnContactInfo"></el-input>
        </el-form-item>
        <el-form-item label="退货地址" prop='returnAddress'>
          <el-input v-model="form.returnAddress"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  import {
    getProviderList,
    getStoreList
  } from 'src/api/index.js'
  export default {
    props: ['type', 'providerId', 'channelId', 'returnContacts', 'returnContactInfo', 'returnAddress', 'freight'],
    created () {
      Promise.all([
        getProviderList({
          'page': 1,
          'size': 1000
        }),
        getStoreList({
          'page': 1,
          'size': 1000
        })
      ]).then(([providerListRes, storeListRes]) => {
        // 供应商赋值
        let providerListResult = providerListRes.data
        if (providerListResult.code === 100) {
          this.providerList = providerListResult.data.list
        }
        // 仓库地址赋值
        let storeListResult = storeListRes.data
        if (storeListResult.code === 100) {
          this.storeList = storeListResult.data.list
        }

        // 如果是编辑状态，设置默认值
        if (this.type === 'edit') {
          this.setDefaultData()
        }
      })
    },
    data () {
      let that = this
      return {
        providerList: [],
        storeList: [],
        form: {
          providerId: '',
          channelId: '',
          returnContacts: '',
          returnContactInfo: '',
          returnAddress: '',
          freight: '0'
        },
        rules: {
          providerId: [
            {
              required: true,
              message: '请选择供应商',
              trigger: 'change',
              validator: function (rule, value, callback) {
                let condition = that.form.providerId
                if (!condition) {
                  callback(new Error('请选择供应商'))
                }
                callback()
              }
            }
          ],
          channelId: [
            {
              required: true,
              message: '请选择仓库',
              trigger: 'change',
              validator: function (rule, value, callback) {
                let condition = that.form.channelId
                if (!condition) {
                  callback(new Error('请选择仓库'))
                }
                callback()
              }
            }
          ],
          returnContacts: [
            {required: true, message: '请填写退货收件人', trigger: 'blur'}
          ],
          returnContactInfo: [
            {
              required: true,
              message: '请填写退货联系方式',
              trigger: 'blur',
              validator: function (rule, value, callback) {
                let condition = that.form.channelId
                if (!condition) {
                  callback(new Error('请填写退货联系方式'))
                }
                if (!value.match(/^(1[3,5,8,7]{1}[\d]{9})|(((400)-(\d{3})-(\d{4}))|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{3,7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$|^([ ]?)$/)) {
                  callback(new Error('请填写正确退货联系方式'))
                }
                callback()
              }
            }
          ],
          returnAddress: [
            {required: true, message: '请填写退货地址', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      getFormData () {
        return this.form
      },
      formValidation () {
        let result
        this.$refs.form.validate(function (boolean) {
          result = boolean
        })
        return result
      },
      setDefaultData () {
        this.form.providerId = this.providerId
        this.form.channelId = this.channelId
        this.form.returnContacts = this.returnContacts
        this.form.returnContactInfo = this.returnContactInfo
        this.form.returnAddress = this.returnAddress
      }
    },
    computed: {
      storeDetail () {
        if (!this.form.channelId || this.storeList.length === 0) {
          return ''
        }
        let curStore = this.storeList.find((item, index) => {
          return item.channelId === this.form.channelId
        })
        return curStore.completeAddr
      }
    }
  }
</script>

<style>

</style>
